<template>
  <div class="shopcar">
    <div class="head">
      <div class="td select">
        <el-checkbox v-model="allchecked" v-on:change="allcheck()">全选</el-checkbox>
      </div>
      <div class="td sp">商品</div>
      <div class="td">规格</div>
      <div class="td">单价</div>
      <div class="td">数量</div>
      <div class="td">小计</div>
      <div class="td">操作</div>
    </div>
    <div class="list" v-for="(item,index) in shopcar">
      <div class="td select">
         <!-- @change="check($event,index)" -->
        <!-- <el-checkbox v-model="item.checked==false" @click="item.checked = !item.checked"></el-checkbox> -->
        <!-- <el-checkbox @change="check()"></el-checkbox> -->
        <!-- <input type="checkbox" :checked="item.default" @change="check($event,item.id)" /> -->
        <input type="checkbox" :checked="item.checked==true" @click="item.checked = !item.checked" name="" @change="check()">
      </div>
      <div class="td sp">
        <img :src="comimgsrc+item.preview" alt="">
        <div class="name">{{item.name}}</div>
      </div>
      <div class="td">{{item.spec}}</div>
      <div class="td price">
        <p>￥{{item.price}}/{{item.unit}}</p>
        <del>￥{{item.max_price}}/{{item.unit}}</del>
      </div>
      <div class="td">
        <div class="num">
          <div class="btn" @click="subnum(item.id,item.quantity,index)"><i class="el-icon-minus"></i></div>
          <input type="text" name="number" disabled="disabled" v-model="item.quantity" >
          <div class="btn" @click="addnum(item.id,item.quantity,index)"><i class="el-icon-plus"></i></div>
        </div>
      </div>
      <div class="td">￥{{item.total_price | numFilter}}</div>
      <div class="td">
          <el-button type="danger" plain size="small" @click="delet(item.id,index)">删除</el-button>
      </div>
    </div>
    <div class="down-box">
      <div class="left">
        <el-checkbox v-model="allchecked" v-on:change="allcheck()">全选</el-checkbox>
      </div>
      <div class="right">
        <div class="go" @click="js_tjdd()">结算</div>
        <p>总价(不含运费)：<span>￥{{total | numFilter}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import cp1 from '@/assets/image/cp1.jpg'
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      cp1,
      total:0,
      allchecked: false,
      shopcar:[],
      comimgsrc:'http://api.mountainfreshes.com',
      checkedArry:[]
    }
  },
  methods:{
    // 获取购物车产品列表
    getshopcar:function(){
        if(this.$store.state.dlzt==1){
              this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.shopcar = res.data.row
                this.$store.state.shopcartnum = res.data.row.length
                console.log(this.shopcar)
                
              })
              .catch(error => {
                alert("网络错误")
              });
            }else{
              this.$confirm('你还没有登录, 不能购买', '提示', {
              confirmButtonText: '去登录',
              cancelButtonText: '先逛逛',
              type: 'warning'
            }).then(() => {
              this.$router.push({ path: '/login' })
            }).catch(() => {
                        
            });
            }
    },
    subnum:function(i,num,index){
      if(this.shopcar[index].quantity==1){
        this.shopcar[index].quantity=1;
        this.shopcar[index].total_price = this.shopcar[index].quantity * this.shopcar[index].price
      }else{
        // this.shopcar[i].number--;
        // this.shopcar[i].little = this.shopcar[i].number * this.shopcar[i].price
        this.$http.post("/index.php/user/cart/reduce_goods",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  id: i,
                  quantity: num
              }))
              .then(res => {
                console.log(res)
                this.shopcar[index].quantity--;
                this.shopcar[index].total_price = this.shopcar[index].quantity * this.shopcar[index].price
                this.jszj();
              })
              .catch(error => {
                alert("网络错误")
              });
      }
      this.jszj();
    },
    addnum:function(i,num,index){
      this.$http.post("/index.php/user/cart/increase_goods",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  id: i,
                  quantity: num
              }))
              .then(res => {
                console.log(res)
                this.shopcar[index].quantity++;
                this.shopcar[index].total_price = this.shopcar[index].quantity * this.shopcar[index].price
                this.jszj();
              })
              .catch(error => {
                alert("网络错误")
              });
      
    },
    allcheck:function(){
      if(this.allchecked){
        for(let i=0;i<this.shopcar.length;i++){
          this.shopcar[i].checked = true
        }
      }else{
        for(let i=0;i<this.shopcar.length;i++){
          this.shopcar[i].checked = false
        }
      }
      this.jszj();
    },
    check:function(){
      // if(e==true){
      //     this.checkedArry.push(id)
          
      // }else{
      //   // console.log(this.checkedArry.findIndex(id))
      //   let ret1 = this.checkedArry.findIndex((value, index, arr) => {
      //     return value == id
      //   })
      //   this.checkedArry.splice(ret1,1)
        
      // }
      // for(let y in this.shopcar){
      //   for(let i in this.checkedArry){
      //     if(this.shopcar[y].id == this.checkedArry[i]){
      //       this.shopcar[y].checked = true
      //     }
      //   }
      // }
      
      // this.shopcar[index].checked = e;
      let num = 0;
      for(let i=0;i<this.shopcar.length;i++){
        if(this.shopcar[i].checked == true){
          num++
        }
      }
      if(num == this.shopcar.length){
        this.allchecked = true
      }else{
        this.allchecked = false
      }
      // if(this.shopcar.length == 0){
      //   this.allchecked = false
      // }

       console.log(this.allchecked);
      // 
      // if (e.target.checked == true) {
      //     this.$http.post("/index.php/user/cart/confirm_default",qs.stringify({
      //         // mobile:this.tel,
      //         // password:this.pwd
      //         user_id: this.$store.state.userid,
      //         id: id
      //     }))
      //     .then(res => {
      //       console.log(res)
      //     })
      //     .catch(error => {
      //       alert("网络错误")
      //     });

      // }else{
      //   this.$http.post("/index.php/user/cart/cancel_default",qs.stringify({
      //         // mobile:this.tel,
      //         // password:this.pwd
      //         user_id: this.$store.state.userid,
      //         id: id
      //     }))
      //     .then(res => {
      //       console.log(res)
      //     })
      //     .catch(error => {
      //       alert("网络错误")
      //     });
      // }
      this.jszj();
    },
    delet:function(i,index){
      
      this.$confirm('你将删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          this.$http.post("/index.php/user/cart/remove_goods",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              user_id: this.$store.state.userid,
              id: i
          }))
          .then(res => {
            
            this.shopcar.splice(index,1);
            console.log(res)
            this.jszj();
            this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.$store.state.shopcartnum = res.data.row.length
                
              })
              .catch(error => {
                alert("网络错误")
              });
          })
          .catch(error => {
            alert("网络错误")
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
    },
    jszj:function(){
      this.total = 0;
      for(let i=0;i<this.shopcar.length;i++){
        if(this.shopcar[i].checked == true){
          this.total = this.total + this.shopcar[i].total_price
        }
      }
    },
    js_tjdd:function(){
      for(let i=0;i<this.shopcar.length;i++ ){
            if(this.shopcar[i].checked==true){
              this.checkedArry.push(this.shopcar[i].id)
            }
          }
          console.log(this.checkedArry)
          if(this.checkedArry.length==0){
            alert('你还没有选择商品，不能结算')
          }else{
            this.$http.post("/index.php/user/cart/settlement",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              user_id: this.$store.state.userid,
              ids: this.checkedArry
          }))
          .then(res => {
            console.log(res)
            this.checkedArry=[]
            this.$router.push({ path: '/buysteps',query:{cplist: res.data} })
          })
          .catch(error => {
            alert("网络错误")
          });
          }
      
          

    }
    
  },

  components:{
    
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后三位
      let transformVal = Number(value).toFixed(3)
      let realVal = transformVal.substring(0, transformVal.length - 1)
      // num.toFixed(3)获取的是字符串
      return Number(realVal)
    }
  },
  created(){
    this.getshopcar();
  },
  watch:{
    // "shopcar":{
    //       handler:function(old_val,now_val){
    //         console.log(old_val,now_val);
    //     },
    //     deep: true
    //   },
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'myshopcar'){
                  this.getshopcar();
                  this.allchecked=false
                }
                if(to.path == '/person/myshopcar'){
                  this.getshopcar();
                  this.allchecked=false
                }
              }
        }
}
</script>

<style scoped lang="less">

.shopcar{
  width: 100%;
  zoom: 1;
  height: auto;
  overflow: hidden;
  .head{
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid #868686;
    .td{
      height: 100%;
      float: left;
      text-align: center;
      line-height: 52px;
      font-size: 14px;
      color: #606266;
      width: 134.4px;
    }
    .select{
      width: 60px;
    }
    .sp{
      width: 190px;
    }
  }
  .list{
    width: 100%;
    height: 154px;
    border-bottom: 1px dashed #b5b5b5;
    margin-top: 16px;
    .td{
      height: 100%;
      float: left;
      text-align: center;
      line-height: 120px;
      font-size: 14px;
      color: #606266;
      width: 134.4px;
      .num{
        width: 110.39px;
        height: 28px;
        margin: 46px auto 0;
        .btn{
          float: left;
          width: 28px;
          height: 28px;
          cursor: pointer;
          text-align: center;
          line-height: 26px;
          background: #c2c2c2;
        }
        input{
          display: block;
          width: 54.39px;
          float: left;
          border: none;
          text-align: center;
          font-size: 14px;
          color: #090909;
          background: #eaeaea;
          height: 26px; 
        }
      }
    }
    .select{
      width: 60px;
    }
    .sp{
      width: 190px;
      img{
        display: block;
        width: 160px;
        height: 120px;
        margin: auto;
      }
      .name{
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #212121;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      }
    }
    .price{
      line-height: 1;
      p{
        font-size: 16px;
        color: #3a3a3a;
        text-align: center;
        padding: 54px 0 8px;
      }
      del{
        font-size: 14px;
        color: #a5a5a5;
      }
    }
  }
  .down-box{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin-top: 20px;
    background: #e5e5e5;
    .left{
      float: left;
      width: 100px;
      height: 100%;
      text-align: center;
      line-height: 50px;
    }
    .right{
      float: right;
      height: 100%;
      .go{
        cursor: pointer;
        display: block;
        width: 150px;
        height: 100%;
        float: right;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        color: #ffffff;
        background: #3fa33a;
      }
      p{
        float: right;
        margin-right: 40px;
        line-height: 50px;
        font-size: 14px;
        color: #3fa33a; 
        span{
          font-size: 18px;
        }
      }
    }
  }
}
</style>
